<template>


  <el-card class="db">
    <div class="title">
      倒计时
    </div>
    <div class="add">

      <button class="custom-btn btn" @click="dialogFormVisible1 = true"><span><el-icon><Plus /></el-icon>添加</span></button>
<!--      <el-button type="primary" @click="dialogFormVisible1 = true"><el-icon><Plus /></el-icon>添加</el-button>-->
    </div>
<!--    <el-divider />-->
    <div class="list">
      <el-table :data="items" stripe style="width: 100%">
        <el-table-column prop="item" label="事项" width="" ></el-table-column>
        <el-table-column prop="ddl" label="截止日期" width="200" >


        </el-table-column>

        <el-table-column prop="remain" label="剩余时间(天)" width="200" >
          <template  #default="dl">
            {{countDown(dl.row.ddl)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="row">
            <el-button type="warning" @click="itemup(row);dialogFormVisible2 = true"><el-icon><Edit /></el-icon>编辑</el-button>
            <el-popconfirm
                width="220"
                confirm-button-text="确定"
                cancel-button-text="再想想"
                title="确定要删除吗"
                @confirm="confirmEvent(row)"
                @cancel="cancelEvent"
            >
              <template #reference>
                <el-button type="danger"> <el-icon><Delete /></el-icon>删除</el-button>
              </template>
            </el-popconfirm>
            <!--            <el-button type="danger">删除</el-button>-->
          </template>
        </el-table-column>

      </el-table>
    </div>
  </el-card>


  <!--添加-->
  <el-dialog v-model="dialogFormVisible1" title="添加">
    <el-form  :model="form1"  label-width="120px">
      <el-form-item label="事项名称">
        <el-input v-model="form1.item"  />
      </el-form-item>
      <el-form-item label="截止时间">
        <div class="block">
          <el-date-picker
              v-model="form1.ddl"
              type="date"
              placeholder="选择截止日期"
              size="size"
          />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="addsub();dialogFormVisible1 = false">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!--编辑-->
  <el-dialog v-model="dialogFormVisible2" title="编辑事项">
    <el-form  :model="form2"  label-width="120px">
      <el-form-item label="事项名称">
        <el-input v-model="form2.item"  />
      </el-form-item>
      <el-form-item label="截止时间">
        <div class="block">
          <el-date-picker
              v-model="form2.ddl"
              type="date"
              placeholder="请选择截止时间"
          />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取消</el-button>
        <!--        <el-button type="primary" @click="dialogFormVisible = false"> -->
        <el-button type="primary" @click="upsub(form2);dialogFormVisible2 = false">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>


<script lang="ts" setup>
// export default {
//   name: "Time"
// }
import axios from "@/utils/axios";
import { ElMessage } from 'element-plus'
import { reactive,ref,onMounted} from "vue";
import dayjs from "dayjs";
import qs from "qs";

const items = ref([]);
const dialogFormVisible1 = ref(false)
const dialogFormVisible2 = ref(false)

const form1 = ref({
  item: "",
  ddl: "",
 }
)

const form2 = ref()

function itemup(row){
  form2.value = row.row;
}

function addsub(){
  form1.value.ddl = dayjs(form1.value.ddl).format("YYYY-MM-DD");
  axios.post(
      "/countadd",
      qs.stringify(form1.value)
  )
      .then(res => {
        location.reload()
        ElMessage({
          message: '添加成功',
          type: 'success',
        })
      })
      .catch(err => {
        console.log(err);
        ElMessage.error('添加失败')
      })
}

const confirmEvent = (row) => {
  console.log('确认!')
  console.log(row.row)
  axios.post(
      "/countdelete",
      qs.stringify(row.row)
  )
      .then(res => {
        location.reload()
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
      })
      .catch(err => {
        console.log(err);
        ElMessage.error('删除失败')
      })
}
const cancelEvent = () => {
  console.log('取消!')
}

function upsub(form2){
  form2.ddl = dayjs(form2.ddl).format("YYYY-MM-DD");
  axios.post(
      "/countupdate",
      qs.stringify(form2)
  )
      .then(res => {
        location.reload()
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
      })
      .catch(err => {
        console.log(err);
        ElMessage.error('修改失败')
      })
}


function countDown(date) {
  var EndTime = new Date(date);
  var NowTime = new Date();
  var t = EndTime.getTime() - NowTime.getTime();
  var res = Math.floor(t / 1000 / 60 / 60 / 24) > 0 ? Math.floor(t / 1000 / 60 / 60 / 24) +1 : "已超时";
  return res;
}

onMounted(() => {


  axios
      .get("/countquery")
      .then((res: any) => {
        items.value = res;
        // console.log(items.value)
      })
      .catch((err: any) => {});
});
</script>

<style scoped>
.db{
  width: 95%;
  margin: 40px 0 0 30px;
}
.title{
  font-size: 30px;
}
.db{
  width: 95%;
  margin: 40px 0 0 30px;
}
.add{
  /*display: inline-block;*/
  /*float: right;*/
  text-align: right;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
/* From www.lingdaima.com */
.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
  7px 7px 20px 0px rgba(0, 0, 0, .1),
  4px 4px 5px 0px rgba(0, 0, 0, .1);
  outline: none;
}

.btn {
  background: linear-gradient(0deg, rgba(255, 151, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
  line-height: 42px;
  padding: 0;
  border: none;
}

.btn span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.btn:before,
.btn:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: rgba(251, 75, 2, 1);
  box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9),
  -4px -4px 5px 0px rgba(255, 255, 255, .9),
  7px 7px 20px 0px rgba(0, 0, 0, .2),
  4px 4px 5px 0px rgba(0, 0, 0, .3);
  transition: all 0.3s ease;
}

.btn:before {
  height: 0%;
  width: 2px;
}

.btn:after {
  width: 0%;
  height: 2px;
}

.btn:hover {
  color: rgba(251, 75, 2, 1);
  background: transparent;
}

.btn:hover:before {
  height: 100%;
}

.btn:hover:after {
  width: 100%;
}

.btn span:before,
.btn span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: rgba(251, 75, 2, 1);
  box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9),
  -4px -4px 5px 0px rgba(255, 255, 255, .9),
  7px 7px 20px 0px rgba(0, 0, 0, .2),
  4px 4px 5px 0px rgba(0, 0, 0, .3);
  transition: all 0.3s ease;
}

.btn span:before {
  width: 2px;
  height: 0%;
}

.btn span:after {
  height: 2px;
  width: 0%;
}

.btn span:hover:before {
  height: 100%;
}

.btn span:hover:after {
  width: 100%;
}
</style>
